<template lang="pug">
  div#Status
    div.top-header
      i.iconfont.icon-fanhui(@click="$router.push('/wode')")
      span.top-header-title 我的动态
    div.status-column
      statusColumn(:columnData="columnData",@showComment="showComment",@showLike="showLike")
    div.bottom-operation
      input.input-text(type="text",placeholder="请输入内容...")
      span.input-submit 发布
</template>
<script>
  import statusColumn from '@/components/statusColumn.vue'

  export default {
    data() {
      return {
        columnData: [{
          userHead: require('@/assets/status/userHead.png'),
          userName: '铁皮人',
          contentTime: '2018-07-06 15:02',
          contentText: '文如其名，书中给我们讲述的都是一篇又一篇的鸡汤文，看完之后只是觉得里面讲述的主人公们都是充满了正能量，大多最后都收获了成功，但是真正能记住的却不多，印象最深刻的一篇就是：别总急着 将生活推翻重来。',
          contentImg: [],
          commentNumber: 14,
          likeNumber: 65,
          ifLike: false,
          commentList: [{
            commentUserName: '超超',
            commentText: '对抗自己的心最辛苦，然而只有对抗它，才是我们真正生活着努力着的证明。'
          }, {
            commentUserName: '超超',
            commentText: '对抗自己的心最辛苦，然而只有对抗它，才是我们真正生活着努力着的证明。'
          }],
          ifComment: true
        }, {
          userHead: require('@/assets/status/userHead.png'),
          userName: '发条音乐',
          contentTime: '2018-07-01 15:02',
          contentText: '对抗自己的心最辛苦，然而只有对抗它，才是我们真正生活着努力着的证明。',
          contentImg: [
            require('@/assets/status/img01.png'),
            require('@/assets/status/img02.png'),
            require('@/assets/status/img03.png')],
          commentNumber: 14,
          likeNumber: 65,
          ifLike: true,
          commentList: [{
            commentUserName: '超超',
            commentText: '对抗自己的心最辛苦，然而只有对抗它，才是我们真正生活着努力着的证明。'
          }],
          ifComment: true
        }, {
          userHead: require('@/assets/status/userHead.png'),
          userName: '铁皮人',
          contentTime: '2018-07-06 15:02',
          contentText: '文如其名，书中给我们讲述的都是一篇又一篇的鸡汤文，看完之后只是觉得里面讲述的主人公们都是充满了正能量，大多最后都收获了成功，但是真正能记住的却不多，印象最深刻的一篇就是：别总急着 将生活推翻重来。',
          contentImg: [],
          commentNumber: 14,
          likeNumber: 65,
          ifLike: true,
          commentList: [{
            commentUserName: '超超',
            commentText: '对抗自己的心最辛苦，然而只有对抗它，才是我们真正生活着努力着的证明。'
          }, {
            commentUserName: '超超',
            commentText: '对抗自己的心最辛苦，然而只有对抗它，才是我们真正生活着努力着的证明。'
          }, {
            commentUserName: '超超',
            commentText: '对抗自己的心最辛苦，然而只有对抗它，才是我们真正生活着努力着的证明。'
          }],
          ifComment: true
        }]
      }
    },
    methods: {
      showComment(index) {
        if (this.columnData[index].ifComment) {
          this.columnData[index].ifComment = false
        } else {
          this.columnData[index].ifComment = true
        }
      },
      showLike(index) {
        if (!this.columnData[index].ifLike) {
          this.columnData[index].ifLike = true
          this.columnData[index].likeNumber++
        }
      }
    },
    components: {
      statusColumn
    }
  }
</script>
<style scoped lang="less">
  #Status {
    .status-column {
      margin-top: 5px;
    }
    .bottom-operation {
      position: fixed;
      bottom: 0;
      height: 45px;
      border-top: 1px solid #e6e6e6;
      width: 100%;
      background: #fff;
      .input-text {
        position: absolute;
        width: calc(100% - 90px);
        height: 25px;
        background: #fff;
        top: 10px;
        border: none;
        left: 20px;
        text-indent: 10px;
        outline: none;
        font-size: 12px;
        color: #9c9c9c;
      }
      .input-submit {
        position: absolute;
        right: 20px;
        line-height: 45px;
      }
    }
  }
</style>
